<template>
  <div class="backgroundpic" >

    <DIV >
      <div style="height: 200px; width: 100%;"></div>

      <div style=" width: 50%; margin: auto;height: 50ch;">
        <h2 >Login</h2>
    <el-form
      ref="form"
      :model="form"
      label-width="80px"
      style="width: 600px; margin: 20px auto"
      @keyup.native.enter="go"
    >
      <el-form-item label="账户">
        <el-input v-model="form.phone"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.upwd" type="password"></el-input>
      </el-form-item>
      <el-form-item label="选择身份">
        <el-radio-group v-model="form.role">
          <el-radio label="1" >顾客</el-radio>
          <el-radio label="2" >工作人员</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="go">登录</el-button>
        <el-button type="primary" @click="register">注册</el-button>
      </el-form-item>

    </el-form>
  </div>
  </DIV>
  </div>
</template>
  <script>
  import { getLogin } from "../api/login";
//   import router from "../router";
export default {
  data() {
    return {
      form: {
        phone: "555",
        upwd: "555",
        role:0
      },
    };
  },
  methods: {
    register(){
      this.$router.push("/register")
    },
    go() {
        if(this.form.role == 0){
            alert("请选择身份！")
            return;
        }
      getLogin(this.form).then((res) => {
        if (res.data.code == 200) {
            sessionStorage.setItem("token",res.data.data)
            this.$message.success(res.data.msg)
            if(this.form.role==1){
              sessionStorage.setItem("phone",this.form.phone);
                this.$router.push("/Index/IndexHome");
            }else{

                this.$router.push("/Home");
            }
        }else{
          this.$message.error(res.data.msg);
        }
      });
    },
  },
};
</script>

<style scoped>
.backgroundpic {
  width: 100%;
  height: 100ch;
  background-image: url("../assets/login1.jpg");
  background-size: cover;
  background-position: center;
  position: relative;
}


</style>
